<template>
  <div class="dashboard-editor-container">
    <div class=" clearfix">
      <pan-thumb :image="avatar" style="float: left">
        Your roles:
        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
      </pan-thumb>
      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">欢迎来到首页~</span>
      </div>
    </div>
    <div>
      <!-- <img :src="emptyGif" class="emptyGif"> -->
      <div class="card">
        <el-steps direction="vertical" :active="3" finish-status="info" style="height: 300px; margin: 10px;">
          <el-step title="今天系统正式上线，开始内测" description="2024-2-10"></el-step>
          <el-step title="所有功能都已完成，可以正常使用" description="2024-2-30"></el-step>
          <el-step title="今天天气不错，可以出去玩了" description="2024-3-20"></el-step>
        </el-steps>
      </div>
      <div class="card">
        <div ref="pieChart" style="width: 600px; height: 400px;"></div>
        <div ref="barChart" style="width: 600px; height: 400px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import GithubCorner from '@/components/GithubCorner';
import PanThumb from '@/components/PanThumb';
import echarts from 'echarts';
import { mapGetters } from 'vuex';
export default {
  name: 'DashboardEditor',
  components: { PanThumb, GithubCorner },
  data() {
    return {
      // emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
      departments: ['销售部', '后勤部', '财务部', '技术部', '产品部'],
      expenditures: [20000, 15000, 18000, 25000, 22000],
      salaries: [18000, 16000, 20000, 24000, 21000],

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  mounted() {
    this.renderPieChart();
    this.renderBarChart();
  },
  methods: {
    renderPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);

      const option = {
        title: {
          text: '财务支出饼图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: this.departments
        },
        series: [
          {
            name: '支出金额',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.departments.map((department, index) => ({
              name: department,
              value: this.expenditures[index]
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      pieChart.setOption(option);
    },
    renderBarChart() {
      const barChart = echarts.init(this.$refs.barChart);

      const option = {
        title: {
          text: '部门薪资柱状图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.departments
        },
        yAxis: {
          type: 'value',
          name: '薪资 (元)'
        },
        series: [
          {
            data: this.salaries,
            type: 'bar',
            itemStyle: {
              color: 'lightgreen' // 水绿色
            }
          },
          {
            data: this.anotherSalaries,
            type: 'bar',
            itemStyle: {
              color: 'lightblue' // 淡蓝色
            }
          },
          {
            data: this.moreSalaries,
            type: 'bar',
            itemStyle: {
              color: 'hotpink' // 黑粉色
            }
          }
        ]
      };


      barChart.setOption(option);
    }
  }
}

</script>

<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .card {
    display: flex;
    width: calc(100% - 20px);
    margin: 10px auto;
    background: #ffffff;
    border-radius: 10px;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
